/* eslint-disable vue/require-v-for-key */
<template>
  <div class="gua-container" v-on:keyup.enter="kd">
    <div class="piano" @click="click">
        <div data-note="C" class="key white gua-C">z</div>
        <div data-note="Db" class="key black gua-Db">s</div>
        <div data-note="D" class="key white gua-D">x</div>
        <div data-note="Eb" class="key black gua-Eb">d</div>
        <div data-note="E" class="key white gua-E">c</div>
        <div data-note="F" class="key white gua-F">v</div>
        <div data-note="Gb" class="key black gua-Gb">g</div>
        <div data-note="G" class="key white gua-G">b</div>
        <div data-note="Ab" class="key black gua-Ab">h</div>
        <div data-note="A" class="key white gua-A">n</div>
        <div data-note="Bb" class="key black gua-Bb">j</div>
        <div data-note="B" class="key white gua-B">m</div>
        <audio v-for="(val, name, index) in audios" :key="index" :src="val" :class="keys[index]"></audio>
    </div>
</div>
</template>

<script>
export default {
  data: function () {
    return {
      audios: {
        C: 'http://localhost:3000/audio/C.mp3',
        Db: 'http://localhost:3000/audio/Db.mp3',
        D: 'http://localhost:3000/audio/D.mp3',
        Eb: 'http://localhost:3000/audio/Eb.mp3',
        E: 'http://localhost:3000/audio/E.mp3',
        F: 'http://localhost:3000/audio/F.mp3',
        Gb: 'http://localhost:3000/audio/Gb.mp3',
        G: 'http://localhost:3000/audio/G.mp3',
        Ab: 'http://localhost:3000/audio/Ab.mp3',
        A: 'http://localhost:3000/audio/A.mp3',
        Bb: 'http://localhost:3000/audio/Bb.mp3',
        B: 'http://localhost:3000/audio/B.mp3'
      },
      keys: [
        'C',
        'D',
        'E',
        'F',
        'G',
        'A',
        'B',

        'Db',
        'Eb',
        'Gb',
        'Ab',
        'Bb'
      ],
      color: 'black'
    }
  },
  methods: {
    kd (event) {
      console.log(event)
    },
    click (e) {
      console.dir(e.target.dataset.note)
      this.playAudio(e.target.dataset.note)
    },
    playAudio (key) {
      console.log(key)
      const audio = document.querySelector(`.${key}`)
      //   console.dir(audio)
      audio.currentTime = 0
      audio.play()
      const change = document.querySelector(`.gua-${key}`)
      console.log(change)
      change.classList.add('active')
      change.style.color = '#03e8f8'
      audio.addEventListener('ended', () => {
        change.classList.remove('active')
        // eslint-disable-next-line eqeqeq
        if (change.dataset.note.length == 1) {
          change.style.color = 'black'
        } else {
          change.style.color = 'white'
        }
      })
    }
  },
  created () {
    // 注册按键事件
    document.addEventListener('keydown', Event => {
      console.log(Event.key)
      const keys = {
        z: 'C',
        x: 'D',
        c: 'E',
        v: 'F',
        b: 'G',
        n: 'A',
        m: 'B',

        s: 'Db',
        d: 'Eb',
        g: 'Gb',
        h: 'Ab',
        j: 'Bb'
      }
      const key = keys[Event.key]
      //   console.log('key', key)
      const audio = document.querySelector(`.${key}`)
      console.dir(audio)
      this.playAudio(key)
    })
  }
}
</script>

<style lang="less" scoped>
    *, *::before, *::after {
    box-sizing: border-box;
    }
    .color {
        color: rgb(0, 217, 255);
    }
    body {
    background-color: #03e8f8;
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    h1{
    margin-left: 20px;
    font-size: 100px  !important ;
    text-align: center;
    color:#0a0a26  !important ;
    font-family: 'Freckle Face'  !important ;
    }
    .gua-container {
    width: 600px;
    height: 450px;
    position: relative;
    margin:auto;
    background-color: black;
    border-radius: 20px;
    }
    .center {
    height: 115px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border: 1px solid #0B548A;
    box-shadow: 0px 3px 1px #0B548A;
    }
    .piano {
    display: flex;
    font-size: 40px;
    text-align: center;
    }

    .key {
    height: calc(var(--width) * 4);
    width: var(--width);
    }

    .white {
    --width: 100px;
    background-color: white;
    border: 1px solid #333;
    line-height: 90vh;
    }

    .white.active {
    background-color: #CCC;
    }

    .black {
    --width: 60px;
    background-color: black;
    margin-left: calc(var(--width) / -2);
    margin-right: calc(var(--width) / -2);
    z-index: 2;
    color: #fff;
    line-height: 50vh;
    }

    .black.active {
    background-color: #333;
    }
</style>
